<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	
	span {
		font-size: 12px; 
	}
</style>
</head>
<!-- Bootstrap -->
<link href="${pageContext.request.contextPath}/javascript/bootstrap/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="${pageContext.request.contextPath}/javascript/table/bootstrap-table.css">
<script src="${pageContext.request.contextPath}/javascript/jQuery-1.12.4.js"></script>
<script src="${pageContext.request.contextPath}/javascript/bootstrap/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath}/javascript/table/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/javascript/table/locale/bootstrap-table-zh-CN.js"></script>
<body>
	<h3>供应商修改</h3>
	<form id="myForm" action="ProviderServlet?op=doEditProviderById" method="post">
		<table class="table">
			<tr>
					<input type="text" id="providId" name="providId" value="${provid.providerId}" readonly hidden />
			</tr>
			<tr>
				<td style="width:200px;">供应商名称</td>
				<td style="width:240px;">
					<input class="form-control" type="text" id="providName" name="providName" value="${provid.providerName}" onblur="checkProvidName(this,2)" />
				</td>
				<td>
					<span id="sProvidName"></span>
				</td>
			</tr>
			<tr>
				<td>供应商地址</td>
				<td>
					<input class="form-control" type="text" id="providAdd" name="providAdd" value="${provid.providerAdd}" onblur="checkProvidAdd(this,2)" />
				</td>
				<td>
					<span id="sProvidAdd"></span>
				</td>
			</tr>
			<tr>
				<td>供应商电话</td>
				<td>
					<input class="form-control" type="text" id="providTel" name="providTel" value="${provid.providerTel}" onblur="checkProvidTel(this,0)" />
				</td>
				<td>
					<span id="sProvidTel"></span>
				</td>
			</tr>
			<tr>
				<td>账户</td>
				<td>
					<input class="form-control" type="text" id="providAccount" name="providAccount" value="${provid.account}" onblur="checkProvidAccount(this,1)" />
				</td>
				<td>
					<span id="sProvidAccount"></span>
				</td>
			</tr>
			<tr>
				<td>邮箱</td>
				<td>
					<input class="form-control" type="text" id="providEmail" name="providEmail" value="${provid.email}" onblur="checkProvidEmail(this,3)" />
				</td>
				<td>
					<span id="sProvidEmail"></span>
				</td>
			</tr>
			<tr>
				<td colspan="3">
					<input class="btn btn-success" type="button" value="确定修改" onclick="checkDate()" /> 
					<input class="btn btn-info" type="reset" value="重置" />
				</td>
			</tr>
			
		</table>
	</form>
</body>
<script type="text/javascript">

	//获取到xmlHttpRequest 对象
	var xmlhttp;
	if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest();
	} else {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}

	//简化数据 value 获取
	function $(id) {
		return document.getElementById(id);
	}

	// 使用正则表达式 校验数据
	function regCheck(str, index) {
		var arr = [
				/^[0-9]{11}$/, // 电话号码
				/^[0-9]{19}$/, // 银行账户
				/^\s*$/, // 匹配空格
				/^(\w{4,20})+(\.\w{4,20})?@[A-Z | a-z | 0-9]{2,6}\.[A-Z | a-z]{2,3}(\.[A-Z | a-z]{2})*$/ // 邮箱
		];
		return arr[index].test(str);
	}

	// 正则表达式 校验 供应商名称
	function checkProvidName(obj, index) {
		
		var providId = $("providId").value;
		var providName = $("providName").value;
		var s_providName = $("sProvidName");
		var f = regCheck(obj.value, index);
		if (f) {
			s_providName.innerHTML = "<font color='red'> × 供应商名称格式不正确.</font>";
		} else {
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					var msg = xmlhttp.responseText;
					if (msg == "可用") {
						s_providName.innerHTML = "<font color='green'> √ </font>";
					} else if (msg == "重名") {
						s_providName.innerHTML = "<font color='red'> × 供应商名称已存在.</font>";
					}
				}
			}
			xmlhttp.open("GET", "ProviderServlet?op=checkProviderNameByEdit&id="+providId+"&providName="+providName,true);
			xmlhttp.send();
		}
		return f;
	}

	// 正则表达式 校验 供应商地址
	function checkProvidAdd(obj, index) {
		var s_providAdd = $("sProvidAdd");
		var f = regCheck(obj.value, index);
		if (f) {
			s_providAdd.innerHTML = "<font color='red'> ×  供应商地址格式不正确.</font>";
		} else {
			s_providAdd.innerHTML = "<font color='green'> √ </font>";
		}
		return f;
	}

	// 正则表达式 校验 供应商电话
	function checkProvidTel(obj, index) {
		var s_providTel = $("sProvidTel");
		var f = regCheck(obj.value, index);
		if (f) {
			s_providTel.innerHTML = "<font color='green'> √ </font>";
		} else {
			s_providTel.innerHTML = "<font color='red'> × 供应商电话格式不正确.</font>";
		}
		return f;
	}

	// 正则表达式 校验 供应商银行账户
	function checkProvidAccount(obj, index) {
		var s_providAccount = $("sProvidAccount");
		var f = regCheck(obj.value, index);
		if (f) {
			s_providAccount.innerHTML = "<font color='green'> √ </font>";
		} else {
			s_providAccount.innerHTML = "<font color='red'> × 供应商银行账户格式不正确.</font>";
		}
		return f;
	}

	// 正则表达式 校验 供应商邮箱
	function checkProvidEmail(obj, index) {
		var s_providEmail = $("sProvidEmail");
		var f = regCheck(obj.value, index);
		if (f) {
			s_providEmail.innerHTML = "<font color='green'> √ </font>";
		} else {
			s_providEmail.innerHTML = "<font color='red'> × 邮箱格式不正确.</font>";
		}
		return f;
	}

	// 校验 提交
	function checkDate() {
		var providName = $("providName");
		var providAdd = $("providAdd");
		var providTel = $("providTel");
		var providAccount = $("providAccount");
		var providEmail = $("providEmail");

		if (!(checkProvidName(providName, 2))
				&& !(checkProvidAdd(providAdd, 2))
				&& checkProvidTel(providTel, 0)
				&& checkProvidAccount(providAccount, 1)
				&& checkProvidEmail(providEmail, 3)) {
			// 数据未修改,不进行提交
			if(providName.value == "${provid.providerName}" && providAdd.value == "${provid.providerAdd}"
				&& providTel.value == "${provid.providerTel}" && providAccount.value == "${provid.account}"
				&& (providEmail.value == "${provid.email}")){
				alert("当前数据未修改,请修改后提交.");
			} else {
				// alert("提交!");
				myForm.submit();
			}
		} else {
			alert("有数据未正确填写!");
		}
	}
</script>
</html>